educational

Photoshop Slices for Newbies

If you’re like Scotty then you build your entire design in Photoshop first, and worry about the HTML and other stuff later. For those unfamiliar with the techniques involved, or those wanting some inside tips, here’s our latest Photoshop tutorial:

Ok, so now you have an entire design ready to be turned into HTML. Starting with a flat image (just one big image), it’s time to cut it up into multiple images, or slices. This way we can add some user activity – such as mouse-over effects, creating links, and animation, as well as many other amazing features. But anyway, when you slice an image you’re actually taking that image and then creating additional images: think of it as a finished puzzle and each individual image slice as a piece.

The size and dimension of each slice, as well as the number of slices is all up to you. The main objects that I like to keep as separate slices are the title and each individual navigation item (also known as a link). It’s also a good idea to slice up high density areas of your image (where a lot of color and activity goes on). Now don’t get too carried away with over slicing (such as creating 500 individual slices all 1 pixel in width), because too much can make things even more confusing, however there is no limit (at least I haven’t hit a limit) to how many slices you can have. So now that you know a little bit about slices, it’s time to actually slice it up!

While in Photoshop (only Photoshop 7: if you’re using an earlier version you more then likely have to go to ImageReady to slice) open up your design and press K to select the ‘slice tool’. Click and drag out a box over your image to create a blue box with a number in the corner (this number is the slice number), this box is actually your second slice since the original image as one piece would be considered one slice. A handy shortcut to know while using slices is pressing CTRL+H key, this will Hide and then Show your slices each time it's pressed.

Once you have created all your slices, select the other slice tool (buried under the original). This is called the ‘Slice Select Tool’. Use this to select and modify each slice (size, attributes), you can also double click any slice to set linking URLs & other miscellaneous details (I usually save off on setting the URLs and such for the next step, mostly because I prefer the quicker interface ImageReady provides, rather then the annoying popup Photoshop uses).

Now it’s time to take our sliced up image and put it in HTML format; and rather than hand-coding this step, we will use ImageReady’s exportation method. First press the ‘Jump to ImageReady’ button (located at the bottom of the toolbar). Although you can export from within Photoshop, I would like you to get a feel for ImageReady so you’re ready to use it for my future articles.

In ImageReady you can perform additional functions such as mouseovers and animations (my next article will get into this). But for now, simply click File > Save For Web, select an optimization (graphic quality levels, reflects file size), then save as layout.html (or whatever you want) in its own folder (make a new one or use one of those empty ‘New Folders’ you have laying around on your desktop).

This exportation will automatically create an images directory (you can define the name of the directory it saves images to within ImageReady’s preferences). Export each individual slice as a separate image into the images directory, as well as generate the HTML table, or even a DHTML DIV layout (once again depending on your preferences).

Take it a Step Further…
Want to know how to put plain text on top of a slice? After exportation, open up the HTML code that Photoshop/ImageReady generated. Find the slice you wish to write plain text over. Now set the table’s <TD> background=" to the image SRC of our selected slice (example, layout_12.gif), also set width = to the same as the original image width and height= to the original image height (both displayed right in front of you within the <IMG> tag of slice 12). It’s also a good idea to set ‘valign=top’. Set this while still in the <TD>, and it will vertically align your text at the top. You can also set valign to bottom (for bottom vertical alignment), or nothing for center (or middle) vertical alignment. Then just simply input your text <TD> .*. > between here! <TD>, and delete the remaining <IMG> tag (with the original slice image name).

Now your flat HTML text will appear on top of your slice image. All we really did was take the slice image and rather then being an image convert it to the background image of the current table cell (<TD>).

One thing you need to keep in mind is that this is very basic, and if you overflow your area with more text than can fit; the background for this individual table cell will stretch, as well as all the other table cells on the same row… Either rework your text to fit within your boundaries, or stick around for my upcoming article which will go more into dealing with stretching backgrounds and mouseovers.

Slices have become a necessary method of designing Web sites, and to do it manually takes a great deal of time and precision, so instead use Photoshop or ImageReady to perform your slicing and exportation, and get to spend more time on more productive areas.

That about wraps it up! There is a lot of activity and jumping around taking place within this article (between Photoshop, ImageReady, and then into actual code), take your time, and explore your options; you may need to reference this article in the future, so now would be a good time to bookmark it! Any questions feel free to contact me at me@scotty.cc. Enjoy the Slices! Scotty

Copyright © 2025 Adnet Media. All Rights Reserved. XBIZ is a trademark of Adnet Media.
Reproduction in whole or in part in any form or medium without express written permission is prohibited.

More Articles

opinion

WIA Profile: Lainie Speiser

With her fiery red hair and a laugh that practically hugs you, Lainie Speiser is impossible to miss. Having repped some of adult’s biggest stars during her 30-plus years in the business, the veteran publicist is also a treasure trove of tales dating back to the days when print was king and social media not even a glimmer in the industry’s eye.

Women in Adult ·
opinion

Fighting Back Against AI-Fueled Fake Takedown Notices

The digital landscape is increasingly being shaped by artificial intelligence, and while AI offers immense potential, it’s also being weaponized. One disturbing trend that directly impacts adult businesses is AI-powered “DMCA takedown services” generating a flood of fraudulent Digital Millennium Copyright Act (DMCA) notices.

Corey D. Silverstein ·
opinion

Building Seamless Checkout Flows for High-Risk Merchants

For high-risk merchants such as adult businesses, crypto payments are no longer just a backup plan — they’re fast becoming a first choice. More and more businesses are embracing Bitcoin and other digital currencies for consumer transactions.

Jonathan Corona ·
opinion

What the New SCOTUS Ruling Means for AV Laws and Free Speech

On June 27, 2025, the United States Supreme Court handed down its landmark decision in Free Speech Coalition v. Paxton, upholding Texas’ age verification law in the face of a constitutional challenge and setting a new precedent that bolsters similar laws around the country.

Lawrence G. Walters ·
opinion

What You Need to Know Before Relocating Your Adult Business Abroad

Over the last several months, a noticeable trend has emerged: several of our U.S.-based merchants have decided to “pick up shop” and relocate to European countries. On the surface, this sounds idyllic. I imagine some of my favorite clients sipping coffee or wine at sidewalk cafés, embracing a slower pace of life.

Cathy Beardsley ·
profile

WIA Profile: Salima

When Salima first entered the adult space in her mid-20s, becoming a power player wasn’t even on her radar. She was simply looking to learn. Over the years, however, her instinct for strategy, trust in her teams and commitment to creator-first innovation led her from the trade show floor to the executive suite.

Women in Adult ·
opinion

How the Interstate Obscenity Definition Act Could Impact Adult Businesses

Congress is considering a bill that would change the well-settled definition of obscenity and create extensive new risks for the adult industry. The Interstate Obscenity Definition Act, introduced by Sen. Mike Lee, makes a mockery of the First Amendment and should be roundly rejected.

Lawrence G. Walters ·
opinion

What US Sites Need to Know About UK's Online Safety Act

In a high-risk space like the adult industry, overlooking or ignoring ever-changing rules and regulations can cost you dearly. In the United Kingdom, significant change has now arrived in the form of the Online Safety Act — and failure to comply with its requirements could cost merchants millions of dollars in fines.

Cathy Beardsley ·
opinion

Understanding the MATCH List and How to Avoid Getting Blacklisted

Business is booming, sales are steady and your customer base is growing. Everything seems to be running smoothly — until suddenly, Stripe pulls the plug. With one cold, automated email, your payment processing is shut down. No warning, no explanation.

Jonathan Corona ·
profile

WIA Profile: Leah Koons

If you’ve been to an industry event lately, odds are you’ve heard Leah Koons even before you’ve seen her. As Fansly’s director of marketing, Koons helps steer one of the fastest-growing creator platforms on the web.

Women in Adult ·
Show More